<template>
  <div class="video-box">
    <video id="video" controls object-fill="fill"></video><br />
    <!-- <video ref="videoPlayer" class="video-js vjs-default-skin">
            
        </video> -->
    <!-- <video-js id="video"></video-js> -->
    <input
      id="upload"
      type="file"
      accept="video/mp4"
      capture="camcorder"
      @change="upload"
    />
  </div>
</template>

<script>
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
// import { createCore } from "@ffmpeg/core";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls"; // 支持 HLS 流播放
export default {
  data() {
    return {
      msg: "",
      videoWidth: "",
      videoHeight: "",
      duration: ""
    };
  },
  mounted() {
    this.initializeFFmpeg();
  },

  methods: {
    async initializeFFmpeg() {
      this.ffmpeg = createFFmpeg({ log: true });
      await this.ffmpeg.load();
    },
    // 选择文件
    async upload(e) {
      var _this = this;
      this.convertVideo(e.target.files[0]);
    },
    async convertVideo(event) {
      console.log(event, "???????????????");
      const file = event;
      const ffmpeg = createFFmpeg({ log: true });
      await ffmpeg.load();
      ffmpeg.FS("writeFile", "input.mp4", await fetchFile(file));
      await ffmpeg.run("-i", "input.mp4", "-c:v", "libx264", "output.mp4");
      const data = ffmpeg.FS("readFile", "output.mp4");
      alert(data);
      const url = URL.createObjectURL(
        new Blob([data.buffer], { type: "video/mp4" })
      );
      console.log("转换完成，可以下载或播放:", url);
    },
  
  }
};
</script>
